<template>
  <div class="log-fields-view">
    <div
      v-for="(item, index) in showFieldsDetail"
      :key="index"
      :class="[`is-${item.formType}`]"
      class="b-cell">
      <div
        :class="[`is-${labelPosition}`, {'has-label': isShowLabel(item) }]"
        class="b-cell-b">
        <div v-if="isShowLabel(item)" class="b-cell-name">{{ getLabelName(item) }}<span v-if="showColon">：</span></div>
        <div class="b-cell-value">
          <wk-field-view
            :props="item"
            :form-type="item.formType"
            :value="item.value"
          >
            <template slot-scope="{}">
              {{ getCommonShowValue(item) }}
            </template>
          </wk-field-view>
        </div>
      </div>
    </div>
    <div
      v-if="showUnfoldView && !isUnfold"
      class="control-bar">
      <el-button
        type="primary-text"
        @click="isUnfold = !isUnfold"
      >查看更多</el-button>
    </div>
  </div>
</template>

<script>
import WkFieldView from '@/components/NewCom/WkForm/WkFieldView'

import CustomFieldsMixin from '@/mixins/CustomFields'
import { getFormFieldShowName } from '@/components/NewCom/WkForm/utils'
import { objDeepCopy } from '@/utils'

export default {
  // 用来展示日志字段
  name: 'LogFieldsView',

  components: {
    WkFieldView
  },

  mixins: [CustomFieldsMixin],

  props: {
    labelPosition: {
      type: String,
      default: 'top' // 默认顶部  top  left
    },
    showColon: Boolean, // 展示冒号，默认不展示
    // 大于0 时 展示展开
    maxShowCount: Number,
    fields: Array
  },

  data() {
    return {
      isUnfold: false, // 默认不展开
      fieldsDetail: [] // 自定义字段等详情
    }
  },

  computed: {
    showUnfoldView() {
      return this.maxShowCount > 0 && this.fields.length > this.maxShowCount
    },

    // 显示的详情
    showFieldsDetail() {
      if (this.showUnfoldView && !this.isUnfold) {
        return this.fieldsDetail.slice(0, this.maxShowCount)
      }
      return this.fieldsDetail
    }
  },

  watch: {
    fields: {
      handler() {
        this.handleFields()
      },
      immediate: true
    }
  },

  created() {},

  mounted() {},

  beforeDestroy() {},

  methods: {
    /**
     * @description: 处理字段
     * @return {*}
     */
    handleFields() {
      if (this.fields) {
        const fieldsDetail = objDeepCopy(this.fields)
        fieldsDetail.forEach(item => {
          if (item.formType === 'detail_table') {
            this.getFormItemDefaultProperty(item, false)
            item.value = this.getItemValue(item, null, 'update')
          }
        })
        this.fieldsDetail = fieldsDetail
      } else {
        this.fieldsDetail = []
      }
    },

    /**
     * @description: 获取名称
     * @param {*} item
     * @return {*}
     */
    getLabelName(item) {
      if (item.formType === 'floatnumber') {
        return item.name + `（${this.$unit('crm')}）`
      } else {
        return item.name
      }
    },

    /**
     * 获取非附件类型的展示值
     */
    getCommonShowValue(item) {
      // 金额格式化
      if (item.formType === 'floatnumber') {
        return this.$money('crm', item.value)
      }

      return getFormFieldShowName(item.formType, item.value, '', item)
    },

    /**
     * @description: 判断是否展示label
     * @param {*} item
     * @return {*}
     */
    isShowLabel(item) {
      return !['desc_text', 'field_group'].includes(item.formType)
    }
  }
}
</script>

<style lang="scss" scoped>
.b-cell {
  .b-cell-b {
    margin-bottom: 8px;

    .b-cell-name {
      color: $--color-text-secondary;
      word-wrap: break-word;
    }

    .b-cell-value {
      min-height: 20px;
      line-height: 1.5;

      ::v-deep .wk-field-view {
        &.is-textarea {
          > span {
            word-break: break-all;
            word-wrap: break-word;
            white-space: pre-wrap;
          }
        }
      }
    }

    &.is-top {
      .b-cell-value {
        margin-top: 4px;
      }
    }

    &.is-left {
      display: flex;
      margin-bottom: 3px;
      overflow: hidden;

      .b-cell-name {
        flex-shrink: 0;
        max-width: 100px;
        font-size: 14px;
        line-height: 1.5;
        word-break: break-all;
        word-wrap: break-word;
      }

      .b-cell-value {
        position: relative;
        flex: 1;
        overflow: hidden;
        font-size: 14px;
        line-height: 1.5;
        text-overflow: ellipsis;
      }
    }

    &.is-left:not(.has-label) {
      .b-cell-value {
        margin-left: 0;
      }
    }
  }
}
</style>
